<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElNotification } from "element-plus"
import axios from '@/axios';
const store = useStore()
const router = useRouter()
const ruleFormRef = ref()
const ruleForm = reactive({
    username: '',
    password: '',
})

const rules = reactive({
    username: [{ required: true, message: "用户名不能为空！", trigger: 'blur' }],
    username: [{ max:20, message: "用户名长度应小于 20", trigger: 'blur' }],
    password: [{ required: true, message: "密码不能为空！", trigger: 'blur' }],
    password: [{ max:30, message: "密码长度应小于 30", trigger: 'blur' }],
})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            const userInfo = {
                "username": ruleForm.username,
                "password": ruleForm.password
            }

            axios.post("/user/loginAdmin", userInfo).then(res => {
                if (res.code == 1) {
                    store.commit("setUserInfo", userInfo)
                    localStorage.setItem("userInfo", JSON.stringify(userInfo))
                    ElNotification({
                        title:"成功",
                        message:"登录成功！",
                        type:"success",
                        duration:1000
                    })
                    router.push("/index")
                    console.log(res);
                }else{
                    console.log(res);
                    ElNotification({
                        title:"失败",
                        message:"登录失败！",
                        type:"error",
                        duration:1000
                    })
                    setTimeout(()=>{},2)
                }
            })

        } else {
            console.log('error submit!')
            return false
        }
    })
}

</script>
<template>
    <div class="login">
        <div class="left">
            <img src="@\assets\logo2.png" alt="">
            <div>
                <h1>Gui-Shop 后台管理系统</h1>
            </div>
        </div>
        <div class="right">
            <div class="form" @keydown.enter.native="submitForm(ruleFormRef)">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                    :hide-required-asterisk=true>
                    <el-form-item label="用户名：" prop="username">
                        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密 &nbsp; 码：" prop="password">
                        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 100%;">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>
<style scoped>
.login {
    display: flex;
    height: 100vh;
}

.left {
    width: 60%;
    background-color: #409eff;
}

.left div {
    color: #FFF;
    height: calc(100vh - 30%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.left div h1 {
    font-size: 48px;
    margin-bottom: 10%;
}

.left img {
    margin-left: 5%;
    margin-top: 10%;
    width: 15%;
}

.right {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>